
var input = document.getElementById("upgteimg");
var showui = document.getElementById("showui");
var ischange = document.getElementById("ischange");

var result;
// var dataArr = []; // 储存所选图片的结果(文件名和base64数据)
var fd; //FormData方式发送请求
var showinput = document.getElementById("showinput");
var oSubmit = document.getElementById("submit");
var dateli, dateinput;
function randomString(len) {　　
    len = len || 32;　　
    var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/ 　　
    var maxPos = $chars.length;　　
    var pwd = '';　　
    for(i = 0; i < len; i++) {　　　　
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));　　
    }　　
    return pwd;
}
if(typeof FileReader === 'undefined') {
    alert("抱歉，你的浏览器不支持 FileReader");
    input.setAttribute('disabled', 'disabled');
} else {
    input.addEventListener('change', readFile, false);
}

function readFile() {
    fd = new FormData();
    var iLen = this.files.length;
    var index = 0;
    var currentReViewImgIndex = 0;
    for(var i = 0; i < iLen; i++) {
        if(!input['value'].match(/.jpg|.gif|.png|.jpeg|.bmp/i)) {　　 //判断上传文件格式
            return alert("上传的图片格式不正确，请重新选择");
        }

        var reader = new FileReader();
        reader.index = i;
        fd.append(i, this.files[i]);
        reader.readAsDataURL(this.files[i]); //转成base64
        reader.fileName = this.files[i].name;
        reader.files = this.files[i];
        reader.onload = function(e) {
            if (this.files.size / 1024 > 1025) {
                var img = new Image();
                img.src = this.result;
                img.onload = function() {
                    var that = this;
                    // 默认按比例压缩
                    var w = that.width,
                        h = that.height,
                        scale = w / h;
                        if (w > 600){
                            w = 600;
                            h = (w / scale);
                        }
                    var quality = 1; // 默认图片质量为1
                    //生成canvas
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    // 创建属性节点
                    var anw = document.createAttribute("width");
                    anw.nodeValue = w;
                    var anh = document.createAttribute("height");
                    anh.nodeValue = h;
                    canvas.setAttributeNode(anw);
                    canvas.setAttributeNode(anh);
                    ctx.drawImage(that, 0, 0, w, h);
                    // quality值越小，所绘制出的图像越模糊
                    var base64 = canvas.toDataURL('image/jpeg', quality);
                    // 回调函数返回base64的值
                    var imgMsg = {
                        name: randomString(5), //获取文件名
                        base64: base64, //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里
                    }
                    dataArr.push(imgMsg);
                    for(var j = 0; j < dataArr.length; j++) {
                        currentReViewImgIndex = j
                    }
                    result = '<div class="showdiv"><img class="leftus" src="/admin/public/images/uploadpic/Arrow_left.png" /><img class="centerus" src="/admin/public/images/uploadpic/delete.png" /><img class="rightus" src="/admin/public/images/uploadpic/Arrow_right.png" /></div><img id="img' +currentReViewImgIndex+randomString(1)+randomString(2) +randomString(5) + '" class="showimg" src="' + base64 + '" />';
                    var li = document.createElement('li');
                    li.innerHTML = result;
                    showui.appendChild(li);
                    index++;

                }
            }else{
                var imgMsg = {
                    name: randomString(5), //获取文件名
                    base64: this.result, //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里
                }
                dataArr.push(imgMsg);
                for(var j = 0; j < dataArr.length; j++) {
                    currentReViewImgIndex = j
                }

                result = '<div class="showdiv"><img class="leftus" src="/admin/public/images/uploadpic/Arrow_left.png" /><img class="centerus" src="/admin/public/images/uploadpic/delete.png" /><img class="rightus" src="/admin/public/images/uploadpic/Arrow_right.png" /></div><img id="img' +currentReViewImgIndex+randomString(1)+randomString(2) +randomString(5) + '" class="showimg" src="' + this.result + '" />';
                var li = document.createElement('li');
                li.innerHTML = result;
                showui.appendChild(li);
                index++;
            }

        }
    }
}

function onclickimg() {
    var dataArrlist = dataArr.length;
    var lilength = document.querySelectorAll('ul#showui li');
    for(var i = 0; i < lilength.length; i++) {
        lilength[i].getElementsByTagName('img')[0].onclick = function(num) {
            return function() {
                if(num == 0) {} else {
                    var list = 0;
                    for(var j = 0; j < dataArr.length; j++) {
                        list = j
                    }
                    var up = num - 1;
                    dataArr.splice(up, 0, dataArr[num]);
                    dataArr.splice(num + 1, 1)
                    var lists = $("ul#showui li").length;
                    for(var j = 0; j < lists; j++) {
                        var usid = $("ul#showui li")[j].getElementsByTagName('img')[3];
                        $("#" +usid.id+ "").attr("src", dataArr[j].base64)
                    }
                }
            }
        }(i)
        //删除图标
        lilength[i].getElementsByTagName('img')[1].onclick = function(num) {
            return function() {
                if(dataArr.length == 1) {
                    dataArr = [];
                    $("ul#showui").html("")
                } else {
                    $("ul#showui li:eq(" + num + ")").remove()
                    dataArr.splice(num, 1)
                }

            }
        }(i)
        //右箭头图标
        lilength[i].getElementsByTagName('img')[2].onclick = function(num) {
            return function() {
                var list = 0;
                for(var j = 0; j < dataArr.length; j++) {
                    list = j
                }
                var datalist = list + 1;
                dataArr.splice(datalist, 0, dataArr[num]);
                dataArr.splice(num, 1)
                var lists = $("ul#showui li").length;
                for(var j = 0; j < lists; j++) {
                    var usid = $("ul#showui li")[j].getElementsByTagName('img')[3];
                    $("#" + usid.id + "").attr("src", dataArr[j].base64)
                }

            }
        }(i)

    }
}

function editimg() {
    for(var j = 0; j < dataArr.length; j++) {
        result = '<div class="showdiv"><img class="leftus" src="/admin/public/images/uploadpic/Arrow_left.png" /><img class="centerus" src="/admin/public/images/uploadpic/delete.png" /><img class="rightus" src="/admin/public/images/uploadpic/Arrow_right.png" /></div><img id="img' +dataArr[j]['name']+ '" class="showimg" src="' + dataArr[j]['base64'] + '" />';
        var li = document.createElement('li');
        li.innerHTML = result;
        showui.appendChild(li);
    }
}
showui.addEventListener("click", function() {
    onclickimg();
}, true)
oSubmit.onclick = function() {
    if(!dataArr.length) {
        return alert('请先选择文件');
    }
    if (ischange.dataset.id != 1){
        send();
    }
}

